<template>
    <div class="c-process-task">
        <div class="c-process-task__form">
            <order-form v-if="taskType === 'order'" :step="step" :form-info="formInfo"
                @submit="handleSubmit"></order-form>
        </div>
        <div>
            <time-line :activities="activities"></time-line>
        </div>
    </div>
</template>

<script>
import {
    getProcessByTaskid,
    processTask,
    forceEnd,
    rejectLeave,
    getInfoByTaskId
} from "./api/myTodoList";
import TimeLine from './components/TimeLine.vue';

import OrderForm from "@/views/todo/components/OrderForm.vue";

const urlMap = {
    "plan/audit": "/system/plan/audit",
}

export default {
    components: {
        OrderForm,
        TimeLine,
    },
    data() {
        return {
            activities: [],
            taskType: "",
            step: "",
            taskId: "",
            formInfo: {}
        };
    },
    mounted() {
        const { taskId, taskType, step } = this.$route.params;
        console.debug("导航至待办处理页, route参数(taskID, taskType, step): ", taskId, taskType, step);

        const backendUrl = urlMap[`${taskType}/${step}`];
        console.debug("根据step获取的待办处理接口地址: ", backendUrl)

        this.taskId = taskId;
        this.taskType = taskType;
        this.step = step;
        getProcessByTaskid(taskId).then(res => {
            console.debug("拿到流程信息: ", res);
            this.activities = res;
        });

        getInfoByTaskId(backendUrl, taskId).then(res => {
            console.debug("后端获取的代办信息: ", res);
            if (res.data) {
                this.formInfo = res.data;
            }
        });
    },
    methods: {
        handleSubmit(data) {
            processTask({
                taskId: this.taskId,
                ...data
            }).then(res => {
                this.$message.success("处理成功!");
                this.$tab.closePage(this.$route).then(({ visitedViews }) => {
                    this.toLastView(visitedViews, this.$route)
                });
            });
        },
        toLastView(visitedViews, view) {
            const latestView = visitedViews.slice(-1)[0]
            if (latestView) {
                this.$router.push(latestView.fullPath)
            } else {
                // now the default is to redirect to the home page if there is no tags-view,
                // you can adjust it according to your needs.
                if (view.name === 'Dashboard') {
                    // to reload home page
                    this.$router.replace({ path: '/redirect' + view.fullPath })
                } else {
                    this.$router.push('/')
                }
            }
        },
        handleCancel() {
            forceEnd(this.taskId).then(res => {
                console.log("撤销成功");
                this.$tab.closePage(this.$route).then(({ visitedViews }) => {
                    this.toLastView(visitedViews, this.$route)
                });
            });
        },
        handleReject() {
            rejectLeave(this.taskId).then(res => {
                console.log("驳回成功!");
                this.$tab.closePage(this.$route).then(({ visitedViews }) => {
                    this.toLastView(visitedViews, this.$route)
                });
            })
        },
    }
};
</script>

<style>
.c-process-task {
    padding: 16px;
    display: flex;
    justify-content: center;
}

.c-process-task__form {
    width: 500px;
}
</style>
